<!--
  用于解决 t-switch 配置 customValue 报错问题
* @author luguoxiang
* @date 2021-09-07
* 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <t-switch v-model="innerValue" v-bind="$attrs" @change="change" />
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';

interface Props {
  customValue?: [any, any];
  modelValue?: string | number | boolean;
}
const props = defineProps<Props>();
const emits = defineEmits(['change', 'update:modelValue']);

const innerValue = ref(false);

function change(e) {
  const { customValue } = props;
  if (customValue?.length) {
    e = customValue[e ? 0 : 1];
  }
  emits('update:modelValue', e);
  emits('change', e);
}

watch(
  () => props,
  ({ customValue, modelValue }) => {
    if (customValue?.length) {
      innerValue.value = customValue[0] === modelValue;
    } else {
      innerValue.value = modelValue === true;
    }
  },
  { immediate: true, deep: true },
);
</script>
<script lang="ts">
export default {
  name: 'LgSwitch',
};
</script>
